<template>
    <div class="task-list-container" style="margin-bottom: 50px; padding-bottom: 10px;">
        <van-nav-bar title="任务列表" fixed />

        <!-- 搜索栏 -->
        <div class="search-section">
            <van-search v-model="searchQuery" placeholder="搜索任务关键词" @search="onSearch" />
        </div>

        <!-- 分类筛选模块 -->
        <div class="search-section category-filter">
            <div class="category-scroll">
                <div :class="['category-item', { active: selectedCategory === 0 }]" @click="filterByCategory(0)">
                    全部
                </div>
                <div v-for="category in categories" :key="category.id"
                    :class="['category-item', { active: selectedCategory === category.id }]"
                    @click="filterByCategory(category.id)">
                    {{ category.name }}
                </div>
            </div>
        </div>

        <!-- 任务列表 -->
        <div class="task-section">
            <div class="section-header">
                <div class="tab-container">
                    <div :class="['tab-item', { active: activeTab === 'latest' }]" @click="switchTab('latest')">
                        最新任务
                    </div>
                    <div v-if="isEmployer" :class="['tab-item', { active: activeTab === 'myPublished' }]"
                        @click="switchTab('myPublished')">
                        我发布的
                    </div>
                    <div v-else :class="['tab-item', { active: activeTab === 'myApplied' }]"
                        @click="switchTab('myApplied')">
                        我的申请
                    </div>
                </div>
            </div>

            <div class="task-cards">
                <van-card v-for="task in displayTasks" :key="task.taskId" :price="task.salary"
                    :price-label="getSalaryTypeText(task.salaryType)" :title="task.taskTitle"
                    @click="viewTaskDetail(task.taskId)">
                    <template #tags>
                        <div class="task-tags">
                            <van-tag plain type="primary" v-if="task.taskCategoryId">{{
                                getCategoryName(task.taskCategoryId) }}</van-tag>
                            <van-tag plain type="success" v-if="task.workHours">{{ task.workHours }}小时</van-tag>
                            <van-tag plain type="warning" v-if="task.taskStatus === 1">急聘</van-tag>
                            <van-tag plain type="danger"
                                v-if="task.skillRequirements && task.skillRequirements.includes('证书')">需持证
                            </van-tag>
                            <van-tag plain type="danger" v-if="task.salaryType">
                                {{ task.salaryType }}
                            </van-tag>
                        </div>
                    </template>

                    <template #desc>
                        <div class="task-info">
                            <div class="info-item">
                                <van-icon name="location-o" />
                                <span>{{ task.taskAddress }}</span>
                            </div>
                            <div class="info-item">
                                <van-icon name="clock-o" />
                                <span>{{ task.startTime }} 至 {{ task.endTime }}</span>
                            </div>
                            <div class="info-item">
                                <van-icon name="friends-o" />
                                <span>需求人数：{{ task.requiredPeople }}人</span>
                            </div>
                        </div>
                    </template>

                    <template #footer>
                        <div class="task-footer">
                            <div class="publisher">
                                <van-image round width="20" height="20"
                                    :src="task.publisherAvatarSrc || ''" />
                                <span>{{ getPublisherName(task.publisherId) }}</span>
                            </div>
                            <div class="publish-time">{{ formatTime(task.createTime) }}</div>
                        </div>
                    </template>

                    <template #bottom>
                        <div class="task-bottom">
                            <div class="task-stats">
                                <span>已申请：{{ task.applyCount }}人</span>
                                <span class="divider">|</span>
                                <div class="rating">
                                    <van-icon name="eye-o" />
                                    <span>{{ task.viewCount }}</span>
                                </div>
                            </div>

                            <!-- 根据当前标签和任务状态显示不同的按钮 -->
                            <template v-if="activeTab === 'latest'">
                                <van-button color="#4f46e5" type="primary" size="small"
                                    @click.stop="applyTask(task.taskId)">立即申请</van-button>
                            </template>

                            <template v-else-if="activeTab === 'myPublished'">
                                <!-- 根据任务状态显示不同的操作按钮 -->
                                <div class="action-buttons">
                                    <template v-if="task.taskStatus === 0">
                                        <!-- 待支付状态 -->
                                        <van-button color="#4f46e5" type="primary" size="mini"
                                            @click.stop="goToPayment(task.taskId)">支付</van-button>
                                    </template>
                                    <template v-else-if="task.taskStatus === 1 || task.taskStatus === 2">
                                        <!-- 进行中或已完成状态 -->
                                        <van-button color="#4f46e5" type="primary" size="mini"
                                            @click.stop="viewApplicants(task.taskId)">查看申请</van-button>
                                    </template>
                                    <template v-else-if="task.taskStatus === -1">
                                        <!-- 已取消状态 -->
                                        <van-button color="#64748b" plain size="mini" disabled>已取消</van-button>
                                    </template>
                                    <template v-else-if="task.taskStatus === -2">
                                        <!-- 已过期状态 -->
                                        <van-button color="#64748b" plain size="mini" disabled>已过期</van-button>
                                    </template>

                                    <!-- 如果任务未开始，显示取消按钮 -->
                                    <van-button v-if="task.taskStatus == 0" color="#4f46e5" plain size="mini"
                                        @click.stop="cancelTask(task.taskId)">取消</van-button>
                                </div>
                            </template>

                            <template v-else-if="activeTab === 'myApplied'">
                                <!-- 我申请的任务操作按钮 -->
                                <div class="action-buttons">
                                    <template v-if="task.taskStatus === 1">
                                        <!-- 已通过状态 -->
                                        <van-button color="#10b981" type="primary" size="small"
                                            disabled>已通过</van-button>
                                    </template>
                                    <template v-else-if="task.taskStatus === -1">
                                        <!-- 已拒绝状态 -->
                                        <van-button color="#64748b" plain size="small" disabled>已拒绝</van-button>
                                    </template>

                                    <!-- 如果申请未被处理，显示取消申请按钮 -->
                                    <van-button v-if="task.taskStatus === 0" color="#4f46e5" type="primary" size="small"
                                        @click.stop="cancelApply(task.taskId)">取消申请</van-button>
                                </div>
                            </template>
                        </div>
                    </template>
                </van-card>
            </div>

            <!-- 空状态提示 -->
            <div v-if="displayTasks.length === 0" class="empty-state">
                <van-empty :description="getEmptyStateDescription()" image="search">
                    <template #bottom>
                        <van-button v-if="activeTab === 'myPublished' && isEmployer" round type="primary"
                            @click="goToPublishTask">
                            立即发布任务
                        </van-button>
                    </template>
                </van-empty>
            </div>
        </div>

        <!-- 雇主发布任务悬浮按钮 -->
        <div v-if="isEmployer" class="publish-button" @click="goToPublishTask">
            <van-icon name="plus" size="24" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import network from '../network'

const router = useRouter()

// 搜索
const searchQuery = ref('')

interface Task {
    taskId: number;
    taskTitle: string;
    salary: string | number;
    salaryType: number;
    taskCategoryId?: number;
    workHours?: string;
    taskStatus: number;
    skillRequirements?: string;
    taskAddress: string;
    startTime: string;
    endTime: string;
    requiredPeople: number;
    publisherId: number;
    createTime: string;
    applyCount: number;
    viewCount: number;
    publisherAvatarSrc?: string; // 新增：用于存储发布者头像的Base64数据
    // ... 其他可能的字段
}

const tasks = ref<Task[]>([]);
const myPublishedTasks = ref<Task[]>([]);
const currentUser = ref<any>(null)
const activeTab = ref('latest')
const myAppliedTasks = ref<Task[]>([]);

// 分类筛选
const selectedCategory = ref(0) // 0表示全部
const categories = ref([
    { id: 1, name: '电工' },
    { id: 2, name: '水工' },
    { id: 3, name: '木工' },
    { id: 4, name: '搬运' },
    { id: 5, name: '保洁' },
    { id: 6, name: '护理' },
    { id: 7, name: '服务' }
])

// 根据分类筛选任务
const filterByCategory = (categoryId: number) => {
    selectedCategory.value = categoryId
    if (categoryId === 0) {
        // 加载全部任务
        loadTasks(); // loadTasks 内部会调用 loadAvatarsForTasks
    } else {
        // 先更新任务过期状态
        network.updateTaskExpiration()
            .then(() => {
                // 然后加载指定分类的任务
                return network.getTaskByCategory(categoryId);
            })
            .then((res: any) => {
                if (res.data && res.data.code === 100) {
                    tasks.value = res.data.data;
                    loadAvatarsForTasks(tasks.value); // 加载头像
                } else {
                    showToast(res.data?.message || '获取分类任务失败')
                }
            })
            .catch((err: any) => {
                console.error('获取分类任务失败:', err)
                showToast('获取分类任务失败，请稍后重试')
            })
    }
}

// 根据当前选中的标签显示对应的任务列表
const displayTasks = computed(() => {
    let filteredTasks;
    if (activeTab.value === 'myPublished') {
        filteredTasks = myPublishedTasks.value;
    } else if (activeTab.value === 'myApplied') {
        filteredTasks = myAppliedTasks.value;
    } else {
        // 在"最新任务"标签页下只显示status为0的任务
        filteredTasks = tasks.value.filter(task => task.taskStatus === 0);
        return filteredTasks;
    }
    return filteredTasks;
})

const getEmptyStateDescription = () => {
    if (activeTab.value === 'latest') {
        return '暂无最新任务'
    } else if (activeTab.value === 'myPublished') {
        return '您还没有发布任务'
    } else if (activeTab.value === 'myApplied') {
        return '您还没有申请任务'
    }
    return '暂无数据'
}

// 切换标签
const switchTab = (tab: string) => {
    activeTab.value = tab
    if (tab === 'myPublished' && myPublishedTasks.value.length === 0) {
        loadMyPublishedTasks()
    } else if (tab === 'myApplied' && myAppliedTasks.value.length === 0) {
        loadMyAppliedTasks()
    }
}

// 判断当前用户是否为雇主
const isEmployer = computed(() => {
    return currentUser.value && currentUser.value.userType === 1
})

// 获取并设置单个任务的发布者头像
const fetchAndSetPublisherAvatar = async (task: Task) => {
    if (task.publisherAvatarSrc) return; // 如果已经加载过，则不再加载

    try {
        const res: any = await network.getAvatarById(task.publisherId);
        if (res.data && res.data.code === 100 && res.data.data && res.data.data.avatarData) {
            task.publisherAvatarSrc = res.data.data.avatarData; // 将获取到的Base64数据赋值
        } else {
            // 可以设置一个默认头像或错误提示，或者保持为空由模板处理
            task.publisherAvatarSrc = ''; // 或者一个默认的错误图片URL
            console.warn(`获取用户 ${task.publisherId} 头像失败: ${res.data?.message}`);
        }
    } catch (error) {
        task.publisherAvatarSrc = ''; // 出错时也设置为空或默认图
        console.error(`获取用户 ${task.publisherId} 头像异常:`, error);
    }
};

// 在任务数据加载或更新后调用此函数来加载头像
const loadAvatarsForTasks = (taskList: Task[]) => {
    taskList.forEach(task => {
        if (!task.publisherAvatarSrc) { // 避免重复加载
            fetchAndSetPublisherAvatar(task);
        }
    });
};

// 获取薪资类型文本
const getSalaryTypeText = (salaryType: number) => {
    const types = {
        1: '/小时',
        2: '/天',
        3: '/周',
        4: '/月',
        5: '/次'
    }
    return types[salaryType as keyof typeof types] || '/天'
}

// 获取分类名称
const getCategoryName = (categoryId: number) => {
    // 这里应该从后端获取分类信息，暂时使用静态数据
    const categories = {
        1: '电工',
        2: '水工',
        3: '木工',
        4: '搬运',
        5: '保洁',
        6: '护理'
    }
    return categories[categoryId as keyof typeof categories] || '其他'
}

// 获取发布者姓名
const getPublisherName = (publisherId: number) => {
    // 实际项目中 any端获取发布者信息
    return `用户${publisherId}`
}

// 格式化时间
const formatTime = (timeString: string) => {
    if (!timeString) return ''

    const now = new Date()
    const time = new Date(timeString)
    const diff = now.getTime() - time.getTime()

    // 小于1小时
    if (diff < 3600000) {
        const minutes = Math.floor(diff / 60000)
        return `${minutes}分钟前发布`
    }
    // 小于24小时
    else if (diff < 86400000) {
        const hours = Math.floor(diff / 3600000)
        return `${hours}小时前发布`
    }
    // 小于30天
    else if (diff < 2592000000) {
        const days = Math.floor(diff / 86400000)
        return `${days}天前发布`
    }
    // 大于30天
    else {
        const year = time.getFullYear()
        const month = time.getMonth() + 1
        const day = time.getDate()
        return `${year}-${month}-${day}发布`
    }
}

// 搜索任务
const onSearch = () => {
    // 搜索最新任务
    network.searchTasks(searchQuery.value)
        .then(res => {
            if (res.data.code === 100) {
                tasks.value = res.data.data
            } else {
                showToast(res.data.message || '搜索任务失败')
            }
        })
}

// 加载任务
const loadTasks = async () => {
    try {
        // 先调用更新任务过期状态的API
        await network.updateTaskExpiration();
        
        const res = await network.getTaskList();
        if (res.data.code === 100) {
            tasks.value = res.data.data;
            loadAvatarsForTasks(tasks.value); // 加载头像
        } else {
            showToast(res.data.message || '获取任务列表失败');
        }
    } catch (error) {
        console.error('获取任务失败:', error);
        showToast('获取任务失败，请稍后重试');
    }
}

// 加载我发布的任务
const loadMyPublishedTasks = async () => {
    try {
        if (!currentUser.value || !currentUser.value.userId) {
            showToast('请先登录');
            return;
        }
        const res: any = await network.getMyPublishedTasks();
        if (res.code === 100) {
            myPublishedTasks.value = res.data;
            loadAvatarsForTasks(myPublishedTasks.value); // 加载头像
        } else {
            showToast(res.message || '获取我发布的任务失败');
        }
    } catch (error) {
        console.error('获取我发布的任务失败:', error);
        showToast('获取我发布的任务失败，请稍后重试');
    }
}

// 加载我申请的任务
const loadMyAppliedTasks = async () => {
    try {
        if (!currentUser.value || !currentUser.value.userId) {
            showToast('请先登录');
            return;
        }
        const res: any = await network.getMyAppliedTasks();
        if (res.code === 100) {
            myAppliedTasks.value = res.data;
            loadAvatarsForTasks(myAppliedTasks.value); // 加载头像
        } else {
            showToast(res.message || '获取我申请的任务失败');
        }
    } catch (error) {
        console.error('获取我申请的任务失败:', error);
        showToast('获取我申请的任务失败，请稍后重试');
    }
}

// 取消申请
const cancelApply = (taskId: number) => {
    showDialog({
        title: '取消确认',
        message: '确定要取消申请该任务吗？',
        showCancelButton: true,
    }).then(() => {
        network.cancelApply(taskId)
            .then((res: any) => {
                if (res && res.code === 100) {
                    showToast('已取消申请')
                    // 从列表中移除该任务
                    myAppliedTasks.value = myAppliedTasks.value.filter(t => t.taskId !== taskId)
                } else {
                    showToast(res?.message || '取消申请失败')
                }
            })
            .catch((err: any) => {
                showToast('取消申请失败，请稍后重试')
                console.error('取消申请失败:', err)
            })
    }).catch(() => {
        // 用户取消了操作
    })
}

// 查看任务详情
const viewTaskDetail = (taskId: number) => {
    // 增加浏览量
    network.increaseViewCount(taskId)
        .catch(err => {
            console.error('增加浏览量失败:', err)
        })

    router.push(`/task-detail/${taskId}`)
}

// 申请任务
const applyTask = (taskId: number) => {
    network.isPublisher(taskId)
        .then((res: any) => {
            if (res && res.data === true) {
                showToast('不能申请自己发布的任务')
            } else {
                network.isAlreadyApplied(taskId)
                    .then((res: any) => {
                        if (res && res.data && res.data.length > 0) {
                            showToast('您已经申请过该任务了')
                        } else {
                            showDialog({
                                title: '申请确认',
                                message: '确定要申请该任务吗？',
                                showCancelButton: true,
                            }).then(() => {
                                network.applyTask(taskId)
                                    .then((res: any) => {
                                        if (res.code == 100) {
                                            showToast('申请成功')
                                            // 更新申请人数
                                            const task = tasks.value.find(t => t.taskId === taskId)
                                            if (task) {
                                                task.applyCount++
                                            }
                                        } else {
                                            showToast(res.message || '申请失败')
                                        }
                                    })
                                    .catch(err => {
                                        showToast('申请失败，请稍后重试')
                                        console.error('申请任务失败:', err)
                                    })
                            })
                        }
                    })
            }
        })
}

// 跳转到支付页面
const goToPayment = (taskId: number) => {
    // 获取任务信息
    const task = myPublishedTasks.value.find(t => t.taskId === taskId)

    // 判断申请人数是否足够
    if (!task || task.applyCount < task.requiredPeople) {
        showDialog({
            title: '申请人数不足',
            message: `当前任务需要${task?.requiredPeople || 0}人，但只有${task?.applyCount || 0}人申请，无法生成订单。`,
            confirmButtonText: '我知道了'
        })
        return
    }

    network.generateOrder(taskId)
        .then((res: any) => {
            if (res.code === 100) {
                const orderId = res.data.orderId
                router.push(`/payment/${orderId}`)
            } else {
                showToast(res.message || '生成订单失败')
            }
        })
        .catch((err: any) => {
            showToast('生成订单失败，请稍后重试')
        })
}

// 查看申请人列表
const viewApplicants = (taskId: number) => {
    router.push(`/task-detail/${taskId}`)
}

// 取消任务
const cancelTask = (taskId: number) => {
    showDialog({
        title: '取消确认',
        message: '确定要取消该任务吗？取消后将无法恢复。',
        showCancelButton: true,
    }).then(() => {
        network.cancelTask(taskId)
            .then((res: any) => {
                if (res && res.code === 100) {
                    showToast('任务已取消')
                    // 更新任务状态
                    loadMyPublishedTasks()
                    const task = myPublishedTasks.value.find(t => t.taskId === taskId)
                    if (task) {
                        task.taskStatus = -1
                    }
                } else {
                    showToast(res?.message || '取消任务失败')
                }
            })
            .catch((err: any) => {
                showToast('取消任务失败，请稍后重试')
                console.error('取消任务失败:', err)
            })
    }).catch(() => {
        // 用户取消了操作
    })
}


// 跳转到发布任务页面
const goToPublishTask = () => {
    router.push('/task-publish')
}

// 获取当前用户信息
const getCurrentUser = () => {
    try {
        network.getInfo()
            .then((res: any) => {
                if (res.code === 100) {
                    currentUser.value = res.data
                    // 根据用户类型加载不同数据
                    if (currentUser.value && currentUser.value.userType === 1) {
                        loadMyPublishedTasks()
                    } else {
                        loadMyAppliedTasks()
                    }
                }
            })
            .catch(err => {
                console.error('获取用户信息失败:', err)
            })
    } catch (error) {
        console.error('解析用户信息失败:', error)
    }
}

const hasLogin = () => {
    network.hasLogin()
        .then((res: any) => {
            if (res.code === 100) {
                return res.data
            }
            else {
                showDialog({
                    title: '登录提示',
                    message: '请先登录',
                    showCancelButton: true,
                    confirmButtonText: '前往登录',
                })
                router.push('/login')
            }
            return false
        })
        .catch(err => {
            console.error('获取登录状态失败:', err)
            return false
        })
}

// 组件挂载时加载数据
onMounted(() => {
    hasLogin()
    loadTasks()
    getCurrentUser()
})
</script>

<style scoped>
.task-list-container {
    min-height: 100vh;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    padding-bottom: 50px;
    padding-top: 46px;
}

.search-section {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px;
    margin: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.task-section {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    margin: 20px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.section-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tab-container {
    display: flex;
    gap: 24px;
    position: relative;
}

.tab-item {
    font-size: 18px;
    font-weight: 600;
    color: #64748b;
    padding-bottom: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.tab-item.active {
    color: #1e293b;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #4f46e5, #6366f1);
    border-radius: 3px;
}

.task-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

:deep(.van-card) {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    padding: 20px;
    margin: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

:deep(.van-card:hover) {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:deep(.van-card__title) {
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

:deep(.van-card__price) {
    font-size: 22px;
    background: linear-gradient(45deg, #f43f5e, #fb7185);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    display: block;
    text-align: right;
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

:deep(.van-tag) {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.task-info {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #64748b;
}

.info-item .van-icon {
    font-size: 16px;
    margin-right: 8px;
    color: #6366f1;
}

.task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.publisher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.publisher span {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.task-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.task-stats {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #64748b;
    gap: 12px;
}

.divider {
    color: #e2e8f0;
}

.rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating .van-icon {
    color: #6366f1;
}

:deep(.van-button--primary) {
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
    height: auto;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}

:deep(.van-search) {
    padding: 0;
    background: transparent;
}

:deep(.van-search__content) {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 8px 12px;
}

/* 悬浮按钮样式 */
.publish-button {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #4f46e5;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.publish-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* 空状态样式 */
.empty-state {
    padding: 40px 0;
}

:deep(.van-empty__image) {
    width: 120px;
    height: 120px;
}

:deep(.van-empty__description) {
    color: #64748b;
    font-size: 16px;
    margin-top: 16px;
}

:deep(.van-button--round) {
    border-radius: 20px;
    padding: 0 24px;
    margin-top: 20px;
}

.action-buttons {
    display: flex;
    gap: 6px;
}

:deep(.van-button--mini) {
    min-width: 56px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 6px;
}

:deep(.van-button--plain) {
    background-color: transparent;
    border: 1px solid currentColor;
}

:deep(.van-button--plain.van-button--disabled) {
    color: #9ca3af;
    border-color: #9ca3af;
    opacity: 0.6;
}

/* 分类筛选样式 */
.category-filter {
    margin-bottom: 8px;
}

.category-scroll {
    display: flex;
    overflow-x: auto;
    padding: 12px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.category-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.category-item {
    flex-shrink: 0;
    padding: 8px 16px;
    margin-right: 10px;
    border-radius: 12px;
    font-size: 14px;
    background-color: #f5f7fa;
    color: #64748b;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.category-item.active {
    background-color: #4f46e5;
    color: white;
    border-color: #4f46e5;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* 其他已有样式 */
.task-list-container {
    padding-top: 46px;
    background-color: #f5f7fa;
}

.search-section {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px;
    margin: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.task-section {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    margin: 20px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.section-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tab-container {
    display: flex;
    gap: 24px;
    position: relative;
}

.tab-item {
    font-size: 18px;
    font-weight: 600;
    color: #64748b;
    padding-bottom: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.tab-item.active {
    color: #1e293b;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #4f46e5, #6366f1);
    border-radius: 3px;
}

.task-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

:deep(.van-card) {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    padding: 20px;
    margin: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

:deep(.van-card:hover) {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:deep(.van-card__title) {
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

:deep(.van-card__price) {
    font-size: 22px;
    background: linear-gradient(45deg, #f43f5e, #fb7185);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    display: block;
    text-align: right;
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

:deep(.van-tag) {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.task-info {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #64748b;
}

.info-item .van-icon {
    font-size: 16px;
    margin-right: 8px;
    color: #6366f1;
}

.task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.publisher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.publisher span {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.task-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.task-stats {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #64748b;
    gap: 12px;
}

.divider {
    color: #e2e8f0;
}

.rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating .van-icon {
    color: #6366f1;
}

:deep(.van-button--primary) {
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
    height: auto;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}

:deep(.van-search) {
    padding: 0;
    background: transparent;
}

:deep(.van-search__content) {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 8px 12px;
}

/* 悬浮按钮样式 */
.publish-button {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #4f46e5;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.publish-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* 空状态样式 */
.empty-state {
    padding: 40px 0;
}

:deep(.van-empty__image) {
    width: 120px;
    height: 120px;
}

:deep(.van-empty__description) {
    color: #64748b;
    font-size: 16px;
    margin-top: 16px;
}

:deep(.van-button--round) {
    border-radius: 20px;
    padding: 0 24px;
    margin-top: 20px;
}

.action-buttons {
    display: flex;
    gap: 6px;
}

:deep(.van-button--mini) {
    min-width: 56px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 6px;
}

:deep(.van-button--plain) {
    background-color: transparent;
    border: 1px solid currentColor;
}

:deep(.van-button--plain.van-button--disabled) {
    color: #9ca3af;
    border-color: #9ca3af;
    opacity: 0.6;
}
</style>
